<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="计划广场" name="first">
        <div class="app-container">
          <div class="left-content2">
            <planGroud></planGroud>
          </div>
          <div class="right-content2">
            <heatList></heatList>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="陪伴匹配" name="second" @click="match">
        <el-dialog
          title="正在匹配中"
          :visible.sync="visible"
          :destroy-on-close="close_modal_destroy"
          :close-on-click-modal="close_modal"
          @close="handleCancel"
          width="400px"
        >
          <div>
            <el-image src="http://106.15.227.184:9000/health/image/wait.gif"></el-image>
          </div>
        </el-dialog>
        <DetailPlan v-if="matchId != undefined" :id="matchId" :info="info"></DetailPlan>
      </el-tab-pane>
      <el-tab-pane label="个人计划" name="third">
        <myPlan></myPlan>
      </el-tab-pane>
    </el-tabs>
    <div style="text-align: right; position: fixed; right: 0; bottom: 0">
      <i @click="addPlan" style="font-size: 50px;color: red" class="el-icon-circle-plus" circle></i>
    </div>
    <AddPlan ref="addPlan"></AddPlan>
  </div>
</template>

<script>
import planGroud from '@/components/lifesquare/planGroud'
import heatList from '@/components/lifesquare/heatList'
import myPlan from '@/components/lifesquare/myPlan'
import AddPlan from "@/components/lifesquare/addPlan";
import DetailPlan from "@/components/lifesquare/detailPlan";
import {findPlan, matchPlan} from "@/api/plan";
import {sendMatomo} from "@/api/matomo";
export default {
  name : 'withMatching',
  components: {DetailPlan, AddPlan, planGroud,heatList,myPlan},
  data() {
    return {
      activeName: 'first',
      matchId: undefined,
      close_modal_destroy: true,
      close_modal: false,
      visible: false,
      info: undefined
    }
  },
  created() {

  },
  methods: {
    async match(newName) {
      if (newName=='second') {
        this.visible = true
        await matchPlan().then(res => {
          this.matchId = res.body.data
          sendMatomo(6,'陪伴匹配', '查询', '匹配到的计划id:'+this.matchId)
        })
        findPlan(this.matchId).then(res => {
          this.info = res.body.data
          this.visible = false
        })
      } else {
        this.matchId = undefined
      }
    },
    addPlan() {
      sendMatomo(5,'陪伴匹配', '添加', '添加计划')
      this.$refs.addPlan.add()
    },
    handleCancel() {
      this.close()
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
  },
  watch: {
    'activeName': {
      handler(newName, oldName) {
        this.match(newName)
      }
    }
  }
}
</script>
<style>
.app-container{
  height: 100%;
}
/*left*/
.left-content2{
  height: 100%;
  width: 550px;
  float: left;
}
.left-content .left-content-title{
  width: 300px;
  display: block;
}
.left-content .left-content-text{
  width: 750px;
  position: relative;
  padding-top: 20px;
}
.left-content .left-content-text .button{
  position: absolute;
  top: 470px;
  left: 470px;
}
.left-content .left-content-text .x-button{
  position: absolute;
  top: 470px;
  left: 370px;
}
/*right*/
.right-content2{
  width: 350px;
  float: left;
  height: 100%;
  padding-left: 100px;
}
</style>
